<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="button_bar.html">
<link rel="import" href="fake_mojo_service.html">
<link rel="import" href="mojo_api.html">
<link rel="import" href="multidevice_setup_delegate.html">
<link rel="import" href="multidevice_setup_shared_css.html">
<link rel="import" href="password_page.html">
<link rel="import" href="setup_succeeded_page.html">
<link rel="import" href="start_setup_page.html">
<link rel="import" href="../../../html/cr.html">
<link rel="import" href="../../../html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">

<dom-module id="multidevice-setup">
  <template>
    <style include="multidevice-setup-shared">
      :host {
        display: block;
        height: 100%;
        overflow: scroll;
        width: 100%;
      }

      #container {
        background-color: var(--cr-card-background-color);
        box-sizing: border-box;
        color: var(--cros-text-color-secondary);
        display: flex;
        flex-direction: column;
        font-size: 13px;
        height: 100%;
        line-height: 16px;
        margin: auto;
      }

      iron-pages {
        height: 100%;
        overflow: var(--iron-pages-overflow, visible);
      }

      button-bar {
        padding: 24px;
      }

      @media screen and (orientation: portrait) {
        :host-context([screen=oobe]) button-bar,
        :host-context([screen=gaia-signin]) button-bar {
          align-items: center;
        }
      }
    </style>
    <div id="container">
      <iron-pages id="ironPages"
          attr-for-selected="is"
          selected="[[visiblePageName]]"
          selected-item="{{visiblePage_}}">
        <template is="dom-if" if="[[shouldPasswordPageBeIncluded_(delegate)]]"
            restamp>
          <password-page class="ui-page"
              auth-token="{{authToken_}}"
              forward-button-disabled="{{passwordPageForwardButtonDisabled_}}"
              password-field-valid="{{passwordFieldValid}}"
              on-user-submitted-password="onUserSubmittedPassword_">
          </password-page>
        </template>
        <template is="dom-if"
            if="[[shouldSetupSucceededPageBeIncluded_(delegate)]]" restamp>
          <setup-succeeded-page class="ui-page"></setup-succeeded-page>
        </template>
        <start-setup-page class="ui-page"
            devices="[[devices_]]"
            selected-instance-id-or-legacy-device-id="{{selectedInstanceIdOrLegacyDeviceId_}}"
            delegate="[[delegate]]">
        </start-setup-page>
      </iron-pages>
      <div class="flex"></div>
      <button-bar forward-button-hidden="[[!forwardButtonTextId]]"
          backward-button-hidden="[[!backwardButtonTextId]]"
          cancel-button-hidden="[[!cancelButtonTextId]]"
          should-show-shadow="[[isScrolledToBottom_]]">
        <slot name="backward-button" slot="backward-button"></slot>
        <slot name="cancel-button" slot="cancel-button"></slot>
        <slot name="forward-button" slot="forward-button"></slot>
      </button-bar>
    </div>
  </template>
  <script src="multidevice_setup.js"></script>
</dom-module>
